<route lang="json5" type="page" needLogin="false">
{
  style: {
    navigationBarTitleText: '已发布',
  },
}
</route>
<template>
  <view class="overflow-hidden bg-#f6f6f6 min-h-100vh p-20rpx">
    <wd-row gutter="10">
      <wd-col :span="12">
        <view class="mb-20rpx" v-for="item in LeftList" :key="item.id">
          <image
            class="w-100% h-276rpx published-img"
            :src="item.coverPhotoUrl"
            @click="handleDetail(item.id)"
          ></image>
          <view class="bg-#fff w-100% py-20rpx box-border">
            <view @click="handleDetail(item.id)">
              <view class="title mb-10rpx px-20rpx">
                {{ item.scenicName }}
              </view>
              <view class="px-20rpx flex" style="flex-wrap: wrap">
                <view class="mr-8rpx" v-for="(tag, index) in item.scenicLabel" :key="index">
                  <wd-tag
                    color="#AD0E0E"
                    bg-color="#AD0E0E"
                    plain
                    style="min-width: 40rpx; text-align: center"
                  >
                    {{ tag }}
                  </wd-tag>
                </view>
              </view>
            </view>
            <view class="card-line"></view>
            <view class="flex items-center justify-between px-20rpx">
              <view>
                <span class="per-money mr-8rpx">¥{{ item.consumption }}</span>
                <span class="per-capita">人均</span>
              </view>
              <view class="flex">
                <view
                  class="bg-#eee py-6rpx px-18rpx text-#101010 border-rd-8rpx text-22rpx mr-8rpx"
                  @click="handleEdit(item)"
                >
                  编辑
                </view>
                <view
                  class="bg-#eee py-6rpx px-18rpx text-#101010 border-rd-8rpx text-22rpx"
                  @click="handleDelete(item.id)"
                >
                  删除
                </view>
              </view>
            </view>
          </view>
        </view>
      </wd-col>
      <wd-col :span="12">
        <view class="mb-20rpx" v-for="item in RightList" :key="item.id">
          <image
            class="w-100% h-276rpx published-img"
            :src="item.coverPhotoUrl"
            @click="handleDetail(item.id)"
          ></image>
          <view class="bg-#fff w-100% py-20rpx box-border">
            <view @click="handleDetail(item.id)">
              <view class="title mb-10rpx px-20rpx">
                {{ item.scenicName }}
              </view>
              <view class="px-20rpx flex" style="flex-wrap: wrap">
                <view class="mr-8rpx" v-for="(tag, index) in item.scenicLabel" :key="index">
                  <wd-tag
                    color="#AD0E0E"
                    bg-color="#AD0E0E"
                    plain
                    style="min-width: 40rpx; text-align: center; display: block"
                  >
                    {{ tag }}
                  </wd-tag>
                </view>
              </view>
            </view>
            <view class="card-line"></view>
            <view class="flex items-center justify-between px-20rpx">
              <view>
                <span class="per-money mr-8rpx">¥{{ item.consumption }}</span>
                <span class="per-capita">人均</span>
              </view>
              <view class="flex">
                <view
                  class="bg-#eee py-6rpx px-18rpx text-#101010 border-rd-8rpx text-22rpx mr-8rpx"
                  @click="handleEdit(item)"
                >
                  编辑
                </view>
                <view
                  class="bg-#eee py-6rpx px-18rpx text-#101010 border-rd-8rpx text-22rpx"
                  @click="handleDelete(item.id)"
                >
                  删除
                </view>
              </view>
            </view>
          </view>
        </view>
      </wd-col>
    </wd-row>
    <wd-loadmore v-if="attractionsList.length > 0" :state="state" @reload="loadmore" />
  </view>

  <wd-fab type="warning" position="right-bottom" :draggable="true">
    <wd-button @click="addAttractions" type="primary" round>新建景点</wd-button>
  </wd-fab>
</template>

<script lang="ts" setup>
import { deleteAttractions, getAttractionsPage } from '@/service/TouristManagement/MyAttractions'
import { useUserStore } from '@/store'
const baseurl = ref(import.meta.env.VITE_SERVER_BASEURL)
const state = ref<string>('loading')
const max = ref<number>(60)
const userStore = useUserStore()
const userId = computed(() => userStore.userInfo.userId)
// 左侧数据列表
const LeftList = ref([])
// 右侧数据列表
const RightList = ref([])
const attractionsList = ref([])
const attractions = reactive({
  pageNo: 1,
  pageSize: 10,
  status: 2,
})
function loadmore() {
  state.value = 'loading'
  setTimeout(() => {
    getAttractionsList()
  }, 1000)
}
onReachBottom(() => {
  if (attractionsList.value.length === max.value) {
    state.value = 'finished'
  } else if (attractionsList.value.length < max.value) {
    attractions.pageNo += 1
    loadmore()
  }
})

// 获取美食列表
async function getAttractionsList() {
  const data: any = await getAttractionsPage({ ...attractions }, { UserId: userId.value })
  attractionsList.value.push(...data.data.list)
  attractionsList.value = attractionsList.value.map((item) => {
    item.fileDOList = item.fileDOList.reverse()
    const fileUrl =
      item.fileDOList && item.fileDOList.length > 0 && item.fileDOList[0].url
        ? item.fileDOList[0].url
        : null
    let scenicLabel
    if (typeof item.scenicLabel === 'string') {
      scenicLabel = item.scenicLabel.split(',')
    } else if (Array.isArray(item.scenicLabel)) {
      scenicLabel = item.scenicLabel
    } else {
      scenicLabel = []
    }
    return {
      ...item,
      scenicLabel,
      coverPhotoUrl: fileUrl ? baseurl.value + fileUrl : null,
    }
  })
  max.value = data.data.total
  attractionsList.value.length === max.value
    ? (state.value = 'finished')
    : (state.value = 'loading')

  LeftList.value = []
  RightList.value = []
  attractionsList.value.forEach((item, index) => {
    if (index % 2 === 0) {
      LeftList.value.push(item)
    } else {
      RightList.value.push(item)
    }
  })
}

// 删除景点
async function handleDelete(id) {
  const params = {
    ids: id,
    typeStr: '景点',
  }
  uni.showModal({
    title: '提示',
    content: '您确定要删除这个景点吗？',
    success: async (res) => {
      if (res.confirm) {
        // 用户点击确定
        const data = await deleteAttractions({ ...params })
        if (data.data) {
          uni.showToast({
            title: '删除成功',
            icon: 'success',
            duration: 2000,
          })
          handleQuery()
        } else {
          uni.showToast({
            title: '删除失败',
            icon: 'none',
            duration: 2000,
          })
        }
      } else if (res.cancel) {
        uni.showToast({
          title: '已取消删除',
          icon: 'none',
          duration: 2000,
        })
      }
    },
  })
}
/** 查询按钮操作 */
const handleQuery = () => {
  attractions.pageNo = 1
  attractionsList.value = []
  LeftList.value = []
  RightList.value = []
  max.value = 60
  getAttractionsList()
}
const handleEdit = (item) => {
  const itemString = encodeURIComponent(JSON.stringify(item))
  uni.navigateTo({
    url: `/pages/TouristManagement/MyAttractions/addAttractions?data= ${itemString}&type=${'edit'}`,
  })
}
const addAttractions = () => {
  uni.navigateTo({ url: '/pages/TouristManagement/MyAttractions/addAttractions?type=' + 'add' })
}
const handleDetail = (id) => {
  uni.navigateTo({ url: '/pages/TouristManagement/MyAttractions/attractionsDetail?id=' + id })
}
onMounted(() => {
  attractions.status = 2
  attractionsList.value = []
  getAttractionsList()
})
</script>
<style lang="scss" scoped>
.published-img {
  border-radius: 20rpx 20rpx 0px 0px;
}
.title {
  color: rgb(16, 16, 16);
  font-size: 26rpx;
  text-align: justify;
  font-weight: 550;
}
.per-money {
  display: inline-block;
  color: rgba(215, 8, 8, 1);
  font-size: 26rpx;
  text-align: left;
  font-weight: 500;
  vertical-align: bottom;
  margin-left: -2rpx;
}
.per-capita {
  display: inline-block;
  color: rgba(123, 123, 123, 1);
  font-size: 16rpx;
  text-align: left;
  font-weight: 500;
}
.card-line {
  border-bottom: 1px solid rgba(238, 238, 238, 1);
  margin: 20rpx 0rpx;
}
</style>
